<template>
  <div class="name">{{ name }}</div>
  <div class="todolist-con">
    <div class="todolist-item" v-for="(item, i) in todoList" :key="i">
      <div class="todolist-fn">{{ item.title }}</div>
      <div class="todolist-date">{{ item.date }}</div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import axios from 'axios'

  const name = ref('')
  const todoList = ref([])

  // response: 结果, 响应  缩写 res
  axios.get('http://localhost:8088/getName', { a: 1, id: 1 }).then(res => {
    name.value = res.data.data.name
  })

  axios.get('http://localhost:8088/getTodoList', { a: 1, id: 1 }).then(res => {
    todoList.value = res.data.data
  })

</script>
<style scoped>
.todolist-con{
  border-radius: 20px;
  border: 1px solid #ccc;
}
.todolist-item{
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 30px;
}
.todolist-date{
  color: #888;
}
.todolist-fn{
  color: #333;
}
</style>
